<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id ="root">
    <!--v-show使用时只是对标签的display属性置为了none，作用标签是存在的，建议对标签高频操作的情况使用v-show,不会频繁操作dom-->
<!--    <div v-show ="false">Angular</div>-->
<!--    <div v-show ="1 === 1">Angular</div>-->
      <button @click="n++">点击加1</button>
      <!--v-if使用时，如果不满足条件，dom不会渲染该标签-->
<!--      <div v-if="n === 1">Angular</div>-->
<!--      <div v-if="n === 2">react</div>-->
<!--      <div v-if="n === 3">Vue</div>-->

      <div v-if="n === 1">Angular</div>-->
      <div v-else-if="n === 2">react</div>
      <div v-else>Vue</div>
      <!--v-if 与template的配合使用 template在dom渲染时不会将其渲染成结构,浏览器中检查时只显示template中包裹的内容-->
      <template v-if="n === 5">
          <h2>Angular</h2>
          <h2>react</h2>
          <h2>Vue</h2>
      </template>
  </div>

</body>
<script type="text/javascript">
  var vm = new Vue({
    el: '#root',
    data:{
      n:0
    }
  })
</script>
</html>